<template>
	<div class="cms-document-container">
		<el-card shadow="hover" class="mb10" v-auth="'cms:document:list'">
			<el-form :inline="true" :model="search">
				<el-form-item>
					<el-input v-model="search.title" placeholder="请输入稿件标题" prefix-icon="el-icon-search"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="search.docStatus" placeholder="请选择稿件状态" style="max-width: 150px;">
						<el-option label="初稿" value="0"></el-option>
						<el-option label="待审核" value="1"></el-option>
						<el-option label="已通过" value="2"></el-option>
						<el-option label="未通过" value="3"></el-option>
						<el-option label="待发布" value="4"></el-option>
						<el-option label="已发布" value="5"></el-option>
						<el-option label="待撤销" value="6"></el-option>
						<el-option label="已撤销" value="7"></el-option>
						<el-option label="定时发布" value="8"></el-option>
						<el-option label="发布失败" value="9"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="daterange" align="right" v-model="dateData.value" :shortcuts="dateData.shortcuts"
						unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" type="primary" @click="onTableSearch()">查询</el-button>
					<el-button icon="el-icon-refresh" @click="onResetSearch()">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="hover">
			<el-button-group>
				<el-button v-auth="'cms:document:add'" type="primary" icon="el-icon-document-add" @click="onOpenAddDocument()">新增</el-button>
				<el-button v-auth="'cms:document:edit'" type="primary" icon="el-icon-edit" 
					@click="onOpenEditDocument()" :disabled="tableData.selections.length != 1">修改</el-button>
				<!-- 状态 != 发布 -->
				<el-button v-auth="'cms:document:move'" type="primary" icon="el-icon-share"
					@click="onTabelRowsDel()" :disabled="tableData.selections.length <= 0 || tableData.selection.isAccord == false || tableData.selection.docStatus == 5">移动</el-button>
				<!-- 状态 = 初稿|未通过|已撤销 -> 待审核 -->
				<el-button v-auth="'cms:document:auth'" type="primary" icon="el-icon-finished" 
					@click="onTabelRowsAction('auth')" :disabled="tableData.selections.length <= 0 || tableData.selection.isAccord == false || (tableData.selection.docStatus != 0 && tableData.selection.docStatus != 3 && tableData.selection.docStatus != 7)">提审</el-button>
				<!-- 状态 = 待审核|未通过 -> 已通过 -->
				<el-button v-auth="'cms:document:allowed'" type="primary" icon="el-icon-circle-check"
					@click="onTabelRowsAction('allowed')" :disabled="tableData.selections.length <= 0 || tableData.selection.isAccord == false || (tableData.selection.docStatus != 1 && tableData.selection.docStatus != 3)">通过提审</el-button>
				<!-- 状态 = 待审核|已通过 -> 未通过 -->
				<el-button v-auth="'cms:document:refused'" type="primary" icon="el-icon-circle-close"
					@click="onTabelRowsAction('refused')" :disabled="tableData.selections.length <= 0 || tableData.selection.isAccord == false || (tableData.selection.docStatus != 1 && tableData.selection.docStatus != 1)">驳回提审</el-button>
				<!-- 状态 = 已通过 -> 发布 -->
				<el-button v-auth="'cms:document:released'" type="primary" icon="el-icon-collection-tag"
					@click="onTabelRowsAction('released')" :disabled="tableData.selections.length <= 0 || tableData.selection.isAccord == false || tableData.selection.docStatus != 2">发布</el-button>
				<el-button v-auth="'cms:document:timing'" type="primary" icon="el-icon-alarm-clock"
					@click="onTabelRowsAction('timing')" :disabled="tableData.selections.length != 1 || tableData.selection.docStatus != 2">定时发布</el-button>
				<!-- 状态 = 已发布|发布失败 -> 重新发布 -->
				<el-button v-auth="'cms:document:released'" type="primary" icon="el-icon-refresh-right"
					@click="onTabelRowsAction('released')" :disabled="tableData.selections.length <= 0 || tableData.selection.isAccord == false || (tableData.selection.docStatus != 5 && tableData.selection.docStatus != 9)">重新发布</el-button>
				<!-- 状态 = 待发布|已发布|定时发布 -> 撤销发布 -->
				<el-button v-auth="'cms:document:revoked'" type="primary" icon="el-icon-refresh-left"
					@click="onTabelRowsAction('revoked')" :disabled="tableData.selections.length <= 0 || tableData.selection.isAccord == false || (tableData.selection.docStatus != 4 && tableData.selection.docStatus != 5 && tableData.selection.docStatus != 8)">撤销发布</el-button>
				
				<el-button v-auth="'cms:document:remove'" type="primary" icon="el-icon-delete"
					@click="onTabelRowsDel()" :disabled="tableData.selections.length <= 0">删除</el-button>
			</el-button-group>
			<el-table ref="tableDocumentRef" :data="tableData.data" @selection-change="onTableSelectionChange" style="width: 100%" row-key="id">
				<el-table-column type="selection" align="cneter" width="50" show-overflow-tooltip></el-table-column>
				<el-table-column type="index" align="cneter" width="50" show-overflow-tooltip></el-table-column>
				<el-table-column label="稿件标题" prop="title" min-width="350" show-overflow-tooltip>
					<template #default="scope">
						<div style="white-space: pre-line;">
							<el-link :underline="false" @click="onOpenPreviewDocument(scope.row)">
								<el-tag size="mini" v-if="scope.row.docSource == 2" >复制</el-tag>
								<el-tag size="mini" v-if="scope.row.docSource == 1" type="warning">引用</el-tag>
								<el-tag size="mini" v-else type="success">原创</el-tag>
								<span class="ml10">{{scope.row.title}}</span>
							</el-link>
							<p v-if="scope.row.docAbstract" class="color-info">摘要：{{scope.row.docAbstract}}</p>
							<el-row :inline="true">
								<el-button type="primary" link icon="el-icon-view" @click="onOpenPreviewDocument(scope.row)">预览</el-button>
								<el-button v-auth="'cms:document:edit'" type="primary" link icon="el-icon-edit" @click="onOpenEditDocument(scope.row)">修改</el-button>
								<el-button v-auth="'cms:document:order'" type="primary" link icon="el-icon-top" @click="onUpOrderDocument(scope.row)">上移</el-button>
								<el-button v-auth="'cms:document:order'" type="primary" link icon="el-icon-bottom" @click="onDownOrderDocument(scope.row)">下移</el-button>
								<el-dropdown class="ml10">
									<span class="el-dropdown-link">
										<el-button type="primary" link >更多 <i class="fa fa-angle-down"></i></el-button>
									</span>
									<template #dropdown>
										<center>
											<el-dropdown-menu>
												<el-dropdown-item v-auth="'cms:document:move'">
													<el-button type="primary" link @click="onOpenMoveDocument(scope.row)">移动</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:auth'" v-if="scope.row.docStatus == 0 || scope.row.docStatus == 3 || scope.row.docStatus == 7">
													<el-button type="primary" link @click="onOpenAuthDocument(scope.row)">提审</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:allowed'" v-if="scope.row.docStatus == 1  || scope.row.docStatus == 3">
													<el-button type="primary" link @click="onOpenAllowedDocument(scope.row)">通过提审</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:refused'" v-if="scope.row.docStatus == 1 || scope.row.docStatus == 2">
													<el-button type="primary" link @click="onOpenRefusedDocument(scope.row)">驳回提审</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:released'" v-if="scope.row.docStatus == 2">
													<el-button type="primary" link @click="onOpenReleasedDocument(scope.row)">发布</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:timing'" v-if="scope.row.docStatus == 2">
													<el-button type="primary" link @click="onOpenTimingDocument(scope.row)">定时发布</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:released'" v-if="scope.row.docStatus == 5 || scope.row.docStatus == 9">
													<el-button type="primary" link @click="onOpenReleasedDocument(scope.row)">重新发布</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:revoked'" v-if="scope.row.docStatus == 4 || scope.row.docStatus == 5 || scope.row.docStatus == 8">
													<el-button type="primary" link @click="onOpenRevokedDocument(scope.row)">撤销发布</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:mirror'">
													<el-button type="primary" link @click="onOpenMirrorDocument(scope.row)">镜像引用</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:unmirror'" v-if="scope.row.docSource == 1">
													<el-button type="primary" link @click="onOpenUnmirrorDocument(scope.row)">取消引用</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:copy'">
													<el-button type="primary" link @click="onOpenCopyDocument(scope.row)">复制引用</el-button>
												</el-dropdown-item>
												<el-dropdown-item v-auth="'cms:document:remove'" divided>
													<el-button type="danger" link @click="onTabelRowDel(scope.row)">删除</el-button>
												</el-dropdown-item>
											</el-dropdown-menu>
										</center>
									</template>
								</el-dropdown>
							</el-row>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="状态" show-overflow-tooltip align="center" width="100">
					<template #default="scope">
						<span v-if="scope.row.docStatus == '0'" style="color: var(--el-color-info-light-3);">初稿</span>
						<span v-else-if="scope.row.docStatus == '1'" style="color: var(--el-color-primary-light-6);">待审核</span>
						<span v-else-if="scope.row.docStatus == '2'" style="color: var(--el-color-primary-light-2);">已通过</span>
						<span v-else-if="scope.row.docStatus == '3'" style="color: var(--el-color-info-light-3);">未通过</span>
						<span v-else-if="scope.row.docStatus == '4'" style="color: var(--el-color-success-light-7);">待发布</span>
						<span v-else-if="scope.row.docStatus == '5'" style="color: var(--el-color-success-light-3);">已发布</span>
						<span v-else-if="scope.row.docStatus == '6'" style="color: var(--el-color-warning-light-3);">待撤销</span>
						<span v-else-if="scope.row.docStatus == '7'" style="color: var(--el-color-info-light-3);">已撤销</span>
						<span v-else-if="scope.row.docStatus == '8'" style="color: var(--el-color-success-light-7);">定时发布</span>
						<span v-else-if="scope.row.docStatus == '9'" style="color: var(--el-color-danger-light-3);">发布失败</span>
						<span v-else style="color: var(--el-color-danger-light-3);">未知状态</span>
					</template>
				</el-table-column>
				<el-table-column label="排序" prop="orderNum" width="80" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column label="创建者" prop="createBy" width="80" show-overflow-tooltip></el-table-column>
				<el-table-column label="更新时间" prop="createTime" width="180" show-overflow-tooltip>
					<template #default="scope">
						<span v-if="scope.row.updateTime == null">{{scope.row.createTime}}</span>
						<span v-else>{{scope.row.updateTime}}</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onPageSizeChange"
				@current-change="onPageCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30, 40, 50, 60]"
				v-model:current-page="search.pageNum"
				v-model:page-size="search.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableData.total"
			>
			</el-pagination>
		</el-card>
		<SelectChannel ref="selectChannelRef" @submit="onTableSearch"></SelectChannel>
		<SelectTemplate ref="selectTemplateRef"></SelectTemplate>
		<SelectTimer ref="selectTimerRef" @submit="onTableSearch"></SelectTimer>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, defineComponent, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import SelectChannel from '/@/views/cms/document/component/selectChannel.vue';
import SelectTemplate from '/@/views/cms/document/component/selectTemplate.vue';
import SelectTimer from '/@/views/cms/document/component/selectTimer.vue';
import { formatDate, getDateRangeShortcuts } from '/@/utils/formatTime';
import { getDocumentList, delDocument, authDocument, allowedDocument, refusedDocument, releasedDocument, revokedDocument, orderDocument, unmirrorDocument } from '/@/api/cms/document/index';
export default defineComponent({
	name: 'cms/document',
	props: {
		// 绑定值
		model: {
			type: Object,
			default: () => {},
		},
	},
	components: { SelectChannel, SelectTemplate, SelectTimer },
	setup(props) {
		const router = useRouter();
		const tableDocumentRef = ref();
		const selectChannelRef = ref();
		const selectTemplateRef = ref();
		const selectTimerRef = ref();
		const state = reactive({
			search:{
				siteId: '',
				channelId: '',
				title: undefined,
				docStatus: undefined,
				startTime: undefined,
				endTime: undefined,
				pageNum: 1,
				pageSize: 10,
			},
			dateData: {
				value: [],
				shortcuts: getDateRangeShortcuts()
			},
			tableData: {
				selection: {
					docStatus: 0,//选中的行数据状态
					isAccord: true,//选中的行数据状态是否一致
				},
				selections: [],//选中的行数据
				data: [],
				total: 0,
				loading: false
			}
		});

		const loadTableData = (params?: any) => {
			getDocumentList(Object.assign(state.search, params)).then((res) => {
				if(res.code == 0){
					state.tableData.data = res.data;
					state.tableData.total = res.total;
					tableDocumentRef.value.clearSelection();
				}
			});
		}

		//查询
		const onTableSearch = () => {
			if(state.dateData.value.length == 2){
				state.search.startTime = formatDate(state.dateData.value[0], 'yyyy-MM-dd') + ' 00:00:00';
				state.search.endTime = formatDate(state.dateData.value[1], 'yyyy-MM-dd') + ' 23:59:59';
			}
			loadTableData(state.search);
		}
		//重置
		const onResetSearch = () => {
			state.dateData.value = [];
			state.search.title = undefined;
			state.search.docStatus = undefined;
			state.search.startTime = undefined;
			state.search.endTime = undefined;
			state.search.pageNum = 1;
			state.search.pageSize = 10;
			loadTableData(state.search);
		}
		// 监听表格选中行
		const onTableSelectionChange = (selections) =>{
			state.tableData.selection.docStatus = selections.length > 0 ? selections[0].docStatus : 0;
			state.tableData.selection.isAccord = selections.filter(item => {
				return item.docStatus == state.tableData.selection.docStatus;
			}).length == selections.length;
			state.tableData.selections = selections;
		};
		// 每页显示数据大小改变
		const onPageSizeChange = (val: number) => {
			state.search.pageSize = val;
			loadTableData(state.search);
		};
		// 页码改变
		const onPageCurrentChange = (val: number) => {
			state.search.pageNum = val;
			loadTableData(state.search);
		};
		// 打开新增稿件弹窗
		const onOpenAddDocument = () => {
			router.push({
				path: '/cms/document/editor',
				query: { 
					siteId: props.model.siteId, 
					channelId: props.model.id, 
					t: new Date().getTime() 
				}
			});
		};
		// 打开编辑稿件弹窗
		const onOpenEditDocument = (row?: any) => {
			row = row || state.tableData.selections[0];
			router.push({
				path: '/cms/document/editor',
				query: { 
					id: row.id,
					siteId: row.siteId, 
					channelId: row.channelId, 
					t: new Date().getTime() 
				}
			});
		};
		// 删除选中行
		const onTabelRowsDel = () => {
			const ids = state.tableData.selections.map(item => item.id);
			if(ids && ids.length > 0){
				ElMessageBox.confirm('确定删除选中的稿件信息吗？', '提示', {
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					delDocument({'ids': ids}).then((res) => {
						if(res.code === 0){
							ElMessage.success('删除成功');
							loadTableData();
						}
					});
				}).catch(() => {});
			}
		};
		// 删除当前行
		const onTabelRowDel = (row: object) => {
			ElMessageBox.confirm('确定删除该条【' + row.title + '】稿件信息吗？', '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				delDocument({'ids': [row.id]}).then((res) => {
					if(res.code === 0){
						ElMessage.success('删除成功');
						loadTableData();
					}
				});
			}).catch(() => {});
		};
		// 稿件移动
		const onOpenMoveDocument = (row: any) => {
			const ids = row ? [row.id] : state.tableData.selections.map(item => item.id);
			selectChannelRef.value.openDialog({ids: ids, siteId: props.model.siteId, channelId: props.model.id}, 'move');
		}
		// 稿件引用
		const onOpenMirrorDocument = (row: any) => {
			selectChannelRef.value.openDialog({ids: [row.id], siteId: props.model.siteId, channelId: props.model.id}, 'mirror');
		}
		// 取消稿件引用
		const onOpenUnmirrorDocument = (row: any) => {
			const ids = row ? [row.id] : state.tableData.selections.map(item => item.id);
			ElMessageBox.confirm('确定取消引用稿件吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				unmirrorDocument({'ids': ids, 'channelId' : props.model.id}).then((res) => {
					if(res.code === 0){
						ElMessage.success('操作成功');
						onTableSearch();
					}
				});
			}).catch(() => {});
		}
		// 稿件复制
		const onOpenCopyDocument = (row: any) => {
			selectChannelRef.value.openDialog({ids: [row.id], siteId: props.model.siteId, channelId: props.model.id}, 'copy');
		}
		
		const onOpenAuthDocument = (row?: any) => {
			const ids = row ? [row.id] : state.tableData.selections.map(item => item.id);
			ElMessageBox.confirm('确定提审稿件吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				authDocument({'ids': ids}).then((res) => {
					if(res.code === 0){
						ElMessage.success('操作成功');
						onTableSearch();
					}
				});
			}).catch(() => {});
		}
		const onOpenAllowedDocument = (row?: any) => {
			const ids = row ? [row.id] : state.tableData.selections.map(item => item.id);
			ElMessageBox.confirm('确定通过稿件提审吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				allowedDocument({'ids': ids}).then((res) => {
					if(res.code === 0){
						ElMessage.success('操作成功');
						onTableSearch();
					}
				});
			}).catch(() => {});
		}
		const onOpenRefusedDocument = (row?: any) => {
			const ids = row ? [row.id] : state.tableData.selections.map(item => item.id);
			ElMessageBox.confirm('确定驳回稿件提审吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				refusedDocument({'ids': ids}).then((res) => {
					if(res.code === 0){
						ElMessage.success('操作成功');
						onTableSearch();
					}
				});
			}).catch(() => {});
		}
		const onOpenReleasedDocument = (row?: any) => {
			const ids = row ? [row.id] : state.tableData.selections.map(item => item.id);
			ElMessageBox.confirm('确定发布稿件吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				releasedDocument({'ids': ids}).then((res) => {
					if(res.code === 0){
						ElMessage.success('操作成功');
						onTableSearch();
					}
				});
			}).catch(() => {});
		}
		const onOpenTimingDocument = (row?: any) => {
			row = row || state.tableData.selections[0];
			selectTimerRef.value.openDialog(row);
		}
		const onOpenRevokedDocument = (row?: any) => {
			const ids = row ? [row.id] : state.tableData.selections.map(item => item.id);
			ElMessageBox.confirm('确定撤销发布稿件吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				revokedDocument({'ids': ids}).then((res) => {
					if(res.code === 0){
						ElMessage.success('操作成功');
						onTableSearch();
					}
				});
			}).catch(() => {});
		}
		const onOpenPreviewDocument = (row: any) => {
			selectTemplateRef.value.openDialog(row);
		}
		const onUpOrderDocument =(row?: any) => {
			orderDocument({ids: [row.id], orderNum: row.orderNum - 1}).then((res) => {
				if(res.code === 0){
					ElMessage.success('操作成功');
					onTableSearch();
				}
			});
		}
		const onDownOrderDocument =(row?: any) => {
			orderDocument({ids: [row.id], orderNum: row.orderNum + 1}).then((res) => {
				if(res.code === 0){
					ElMessage.success('操作成功');
					onTableSearch();
				}
			});
		}
		const onTabelRowsAction = (action?: string) => {
			switch(action){
				case 'auth':
					onOpenAuthDocument();
					break;
				case 'allowed':
					onOpenAllowedDocument();
					break;
				case 'refused':
					onOpenRefusedDocument();
					break;
				case 'released':
					onOpenReleasedDocument();
					break;
				case 'timing':
					onOpenTimingDocument();
					break;
				case 'revoked':
					onOpenRevokedDocument();
					break;
				default:
					break;
			}
		}
		// 页面加载时
		onMounted(() => {
			state.search.siteId = props.model.siteId;
			state.search.channelId = props.model.id;
			if(props.model.parentId === '0'){
				state.search.channelId = '';
			}
			loadTableData();
		});
		//监听model数据
		watch(() => props.model.id, () => {
			state.search.siteId = props.model.siteId;
			state.search.channelId = props.model.id;
			if(props.model.parentId === '0'){
				state.search.channelId = '';
			}
			loadTableData();
		}, {deep: true});
		
		return {
			tableDocumentRef,
			selectChannelRef,
			selectTemplateRef,
			selectTimerRef,
			onTableSearch,
			onTableSelectionChange,
			onResetSearch,
			onPageSizeChange,
			onPageCurrentChange,
			onOpenAddDocument,
			onOpenEditDocument,
			onTabelRowsDel,
			onTabelRowDel,
			onOpenMoveDocument,
			onOpenMirrorDocument,
			onOpenUnmirrorDocument,
			onOpenCopyDocument,
			onOpenAuthDocument,
			onOpenAllowedDocument,
			onOpenRefusedDocument,
			onOpenReleasedDocument,
			onOpenTimingDocument,
			onOpenRevokedDocument,
			onOpenPreviewDocument,
			onUpOrderDocument,
			onDownOrderDocument,
			onTabelRowsAction,
			...toRefs(state),
		};
	},
});
</script>